import React, {Component} from 'react';
import './Music.css';
import MusicSubMenu from "../../components/Music/MusicSubMenu/MusicSubMenu";
import PlayAll from "../../components/Music/PlayAll/PlayAll";

class Music extends Component {
	constructor(props) {
		super(props);

		this.state = {
			id: this.props.match.params.id, // 音乐id
			playlist: {}, // 音乐信息
			tracks: [], // 音乐列表
			style: {}, // 子组件背景图
		}

		// console.log(props);
	}

	componentDidMount() {
		this.initialize.call(this);

	}

	// 初始化请求数据
	initialize() {
		this.$axios({
			url: '/playlist/detail',
			params: {
				id: this.state.id
			}
		}).then(res => {
			// console.log(res);
			if (res.code === 200) {
				this.setState(state => {
					return {
						playlist: res.playlist || {},
						tracks: res.playlist.tracks || [],
						style: {
							backgroundImage: `url(${res.playlist ? res.playlist.coverImgUrl : ''})`
						}
					}
				})
			}
		})
	}

	back() {
		    this.props.history.go(-1);
	}

	render() {
		return (
			<div>
				<MusicSubMenu back={this.back.bind(this)} style={this.state.style} playlist={this.state.playlist}/>
				<PlayAll subscribedCount={this.state.playlist.subscribedCount} tracks={this.state.tracks}/>
			</div>
		);
	}
}

export default Music;